import React, {useState} from 'react';
import RouterView from "@/routes/routerView";
import '../css/home.css'
function Home(props) {
  let [arrList, setArrList] = useState(
    [
      {
        img:"/img/1.png",
        name:"半城细沙",
        auto:"许嵩"
      },
      {
        img:"/img/2.png",
        name:"十年人间",
        auto:"郭聪明"
      },
      {
        img:"/img/3.png",
        name:"悠殇叹",
        auto:"阿悠悠"
      },
    ]
    );
    let [dataList, setArrLists] = useState(
            [
              {
                id:1,
                name:"不染",
                img:"/img/8.png"
              },
              {
                id:2,
                name:"一吻天荒",
                img:"/img/9.png"
              },
              {
                id:3,
                name:"十年人间",
                img:"/img/10.png"
              },
              {
                id:4,
                name:"野摩托",
                img:"/img/11.png"
              },
              {
                id:5,
                name:"此生过半",
                img:"/img/12.png"
              },
            ]
      );
     let toList=(item)=>{
        console.log(item);
        props.history.push(`/detil/${item.id}`,{name:item})
      }
  return (
    <div style={{listStyle:'none'}}>
      <div className="logo">
        <img src="/img/4.png" className="lol"/>
        <h1 className="shang">新碟上架</h1>
        <div className="duo">
            <span style={{fontSize:"12px"}}>更多</span>
            <span style={{color:'red'}}>➡</span>
        </div>
      </div>
        <ul className="nav">
          {
            arrList.map((item,index)=>{
              return <li key={index}>
                <img src={item.img}/>
                <p>{item.name}</p>
                <p>{item.auto}</p>
              </li>
            })
          }
        </ul>
        <div className="logo">
        <img src="/img/4.png" className="lol"/>
        <h1 className="shang">榜单</h1>
        <div className="duo">
            <span style={{fontSize:"12px"}}>更多</span>
            <span style={{color:'red'}}>➡</span>
        </div>
      </div>
          <div className="ge">
            <div className="tops">
              <img src="/img/5.png"/>
              <div className="right">
                <p>云音乐新歌榜</p>
                <img src="/img/6.png"/>
              </div>
            </div>
            <ul className="bottom">
              {
                dataList.map((item,index)=>{
                  return <li key={item.id} onClick={()=>toList(item)}>
                    <p style={{float:"left",color:'red'}}>{item.id}.</p>
                    <p>{item.name}</p>
                  </li>
                })
              }
            </ul>
          </div>
      <RouterView routes={props.children}/>
    </div>
  )
}

export default Home;
